<template>
  <div>
      <city-header></city-header>
      <city-search :cities="cities"></city-search>
      <city-list :cities="cities" :hot="hotCityes" :letter="letter"></city-list>
      <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
import CityHeader from '../components/city/Header'
import CitySearch from '../components/city/Search'
import CityList from '../components/city/List'
import CityAlphabet from '../components/city/Alphabet'
export default {
    components:{
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data(){
        return {
            cities:{},
            hotCityes:[],
            letter:''
        }
    },
    mounted(){
        this.getCityInfo()
    },
    methods:{
        getCityInfo(){
            this.$http.get('/api/city.json')
            .then(this.handleGetCityInfoSucc)
        },
        handleGetCityInfoSucc(res){
            console.log(res)
            if(res.data.ret==true){
                this.cities=res.data.data.cities
                this.hotCityes=res.data.data.hotCities
            }
        },
        handleLetterChange(letter){
            // console.log(letter)
            this.letter=letter
        }
        
    }
}
</script>

<style lang="stylus" scoped>

</style>